<template>
  <el-container>
    <el-aside :width="isCollapse ? '64px' :'200px'">
      <!--菜单区域-->
      <el-menu
        background-color="#333744"
        text-color="#fff"
        unique-opened
        :default-active="activePath"
        class="el-menu-vertical-demo"
        active-text-color="#ffd04b"
        :collapse-transition="false"
        :collapse="isCollapse"
        router
      >
        <el-menu-item index="myline" @click="saveNavState('myline','我的线路')">
          <i class="el-icon-location"></i>
          <span slot="title">我的线路</span>
        </el-menu-item>
        <el-menu-item index="mytask" @click="saveNavState('mytask','短信任务')">
          <i class="el-icon-menu"></i>
          <span slot="title">短信任务</span>
        </el-menu-item>
        <el-menu-item index="myrecord" @click="saveNavState('myrecord','充值记录')">
          <i class="el-icon-document"></i>
          <span slot="title">充值记录</span>
        </el-menu-item>
        <el-menu-item index="mystatistics" @click="saveNavState('mystatistics','数据统计')">
          <i class="el-icon-setting"></i>
          <span slot="title">数据统计</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <!--菜单区域-->
    <el-container>
      <el-header style="display:flex;justify-content: space-between;align-items: center;font-size:24px">
          <el-button icon="el-icon-s-fold" @click="toggleCollapse"></el-button>
            <el-breadcrumb separator="/" style="position: absolute;left:300px">
                <el-breadcrumb-item :to="topath">{{bread}}</el-breadcrumb-item>
            </el-breadcrumb>
        <span>
          <span>王小虎</span>
        <el-dropdown style="margin-left:25px;"  @command="handleCommand">
          <el-button icon="el-icon-setting" circle></el-button>
          <el-dropdown-menu slot="dropdown" >
            <el-dropdown-item>发短信</el-dropdown-item>
            <el-dropdown-item>我的余额</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        </span>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  created () {
    if (!this.activePath) {
      this.activePath = window.sessionStorage.getItem('activePath')
    }
    if (!this.bread) {
      this.bread = window.sessionStorage.getItem('bread')
    }
    if (!this.topath) {
      this.topath = window.sessionStorage.getItem('topath')
    }
  },
  data () {
    return {
      isCollapse: false,
      activePath: '/myline',
      bread: '我的线路',
      topath: {
        path: '/myline'
      }
    }
  },
  methods: {
    handleCommand (command) {
      switch (command) {
        case 'logout':
          this.logout()
          break
      }
    },
    logout () {
      this.$message.success('退出成功')
      window.sessionStorage.clear()
      this.$router.push('/login')
    },
    toggleCollapse () {
      this.isCollapse = !this.isCollapse
    },
    saveNavState (index, bread) {
      window.sessionStorage.setItem('activePath', index)
      window.sessionStorage.setItem('bread', bread)
      window.sessionStorage.setItem('topath', index)
      this.activePath = index
      this.bread = bread
      this.topath.path = index
    }
  }
}
</script>

<style lang="less" scoped>
.el-container{
  height: 100%;
}
.el-header{
  background-color: #eaedf1;
  line-height: 60px;
}
.el-aside{
  background-color: #333744;
}
.el-main{
  height: 100%;
  background-color: #eaedf1 ;
}
</style>
